<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="bootstrap-4.6.2-dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>
  <style>
    body {
      background-color: Canvas;
      color: CanvasText;
      color-scheme: light dark;
    }

    .box0 {
      width: 480px;
      min-height: 500px;
      border: 1px solid;
      padding: 30px 20px 20px 20px;
      margin: 150px auto 0 auto;
    }

    .box0 h2 {
      text-align: center;
      padding:0 20px;
    }
    .box0 h3 {
      text-align: center;
      padding:0 20px;
    }
    #login{
      width: 100px; 
    }
  </style>

</head>

<body>


  <div class="box0">
    <form>
      <h2>海昌信息系统</h2>
      <h3>用户登陆</h3>

      <div class="form-group">
        <label for="role">角色</label>
        <select id="role" class="form-control form-control-sm">
          <option>普通用户</option>
          <option>管理员</option>
        </select>
      </div>
      <div class="form-group">
        <label for="user">用户名</label>
        <input type="text" class="form-control" id="user" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="pwd">密码</label>
        <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
      </div>
      <div class="form-group">
        <label for="code">验证码</label>
        <div class="row">
          <div class="col-sm-7">
            <input type="text" class="form-control" id="code" placeholder="请输入验证码"/>
          </div>
          <div class="col-sm-5">
            <img class="img-responsive" src="1.png" style="width: 144px;height: inherit;"/>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="message-code">短信验证码</label>
        <div class="row">
          <div class="col-sm-7">
            <input type="text" class="form-control" id="message-code" placeholder="请输入短信验证码"/>
          </div>
          <div class="col-sm-5">
            <input type="button" class="btn btn-primary btn-block" value="发送验证码"/>
          </div>
        </div>
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="remember">
        <label class="form-check-label" for="remember">记住密码</label>
      </div>
      <button type="submit" class="btn btn-primary" id="login">登陆</button>
      <span style="color: red;display: none;" >用户名和密码错误</span>
    </form>
  </div>
</body>

</html>